<script setup lang="ts">
import { DestinationConfig } from '../../services/client';
import NtmMetaDataEditor from './NtmMetaDataEditor.vue';
import Errors from '../../types/Errors';

const model = defineModel<DestinationConfig>({ default: new DestinationConfig() });
const errors = defineModel<Errors>('errors');
const props = defineProps<{ column?: number }>();

const initMetaData = () => {
    model.value.metadata = {}
}

const removeMetaData = () => {
    model.value.metadata = undefined;
}

</script>

<template>
    <ElDescriptions :column="props.column" border style="width: 100%;">
        <ElDescriptionsItem label="Destination Config Id">
            <ElInput v-model="model.destinationConfigId"></ElInput>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Address">
            <ElInput v-model="model.address"></ElInput>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Host">
            <ElInput v-model="model.host"></ElInput>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Health">
            <ElInput v-model="model.health"></ElInput>
        </ElDescriptionsItem>
        <ElDescriptionsItem>
            <template #label>
                <ElSpace>
                    <ElText>MetaData</ElText>
                    <ElButton size="small" v-if="!model.metadata" @click="initMetaData">初始化</ElButton>
                    <ElButton size="small" v-else type="danger" @click="removeMetaData">清空</ElButton>
                </ElSpace>
            </template>
            <template v-if="model.metadata" #default>
                <NtmMetaDataEditor :errors="errors" v-model="model.metadata"></NtmMetaDataEditor>
            </template>
        </ElDescriptionsItem>
    </ElDescriptions>
</template>